<template>
	<view class="box">
		<view class="box-flex-center logo-box">
			<image src="@/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="box-flex-around login-buttons">
			<button class="login-button-cancel" @click="back">拒绝</button>
			<button class="login-button-confirm" @click="getUserInfo">授权登录</button>
		</view>
		<cu-agreement :checked="agreementChecked" @change="agreementChange"></cu-agreement>
		<view>
			<uni-popup ref="phoneInfo">
				<view class="dialog">
					<view class="dialog-content">
						<view>
							<uni-icons type="auth-filled" size="60" color="#18bc37"></uni-icons>
						</view>
						<view>
							<text>授权绑定您的手机号码</text>
						</view>
					</view>
					<view class="dialog-footer">
						<button class="button-cancel" @click="phoneInfoClose">拒绝</button>
						<button class="button-confirm" open-type="getPhoneNumber" @getphonenumber="getPhone">允许</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import cuAgreement from '@/components/agreement.vue'
	export default {
		components: {
			cuAgreement
		},
		data() {
			return {
				agreementChecked: false,
				loginWithPhone: false,
				loginParams: {
					code: '',
					name: '',
					photo: '',
					phoneCode: '',
					deviceInfo: ''
				}
			};
		},
		methods: {
			agreementChange(val) {
				this.agreementChecked = val;
			},
			getUserInfo() {
				if (this.agreementChecked) {
					uni.getUserProfile({
						desc: '获取您的微信昵称和头像',
						success: userRes => {
							this.loginParams.name = userRes.userInfo.nickName;
							this.loginParams.photo = userRes.userInfo.avatarUrl;

							if (this.loginWithPhone) {
								this.$refs.phoneInfo.open();
							} else {
								this.login();
							}
						}
					})
				} else {
					this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意')
				}
			},
			getPhone(res) {

				if (res.detail.code) {
					this.loginParams.phoneCode = res.detail.code;
					this.login();
				}
			},
			phoneInfoClose() {
				this.$refs.phoneInfo.close();
			},
			login() {

				uni.showLoading({
					mask: true,
					title: 'loading...'
				});

				let deviceInfo = getApp().globalData.deviceInfo;
				this.loginParams.deviceInfo = JSON.stringify(deviceInfo);

				uni.login({
					provider: 'weixin',
					scopes: 'auth_user',
					onlyAuthorize: true,
					success: loginRes => {
						this.loginParams.code = loginRes.code;
						this.$api.post('/appLogin/loginWechat', this.loginParams).then(res => {
							uni.hideLoading();
							if (res.data) {
								this.$util.saveLoginToken(res.data.token);
								uni.reLaunch({
									url: '/pages/my/my'
								})
							}
						}).catch(err => {
							uni.hideLoading();
							this.$util.messageTip(err.message)
						})
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo-box {
		padding: 50px;
		margin-bottom: 100px;

		image {
			width: 75px;
			height: 75px;
		}
	}

	.login-buttons {
		button {
			width: 130px;
			border-radius: 20px;
			font-size: 18px;
			font-weight: 500;

			&:after {
				border: 0;
			}
		}

		.login-button-cancel {
			background-color: $uni-info-disable;
			color: $uni-main-color;
		}

		.login-button-confirm {
			background-color: $uni-btn-bg-color;
			color: $uni-btn-color;
		}
	}
</style>
